<!-- 提示弹窗模板组件 -->
<template>
    <div class="reminder-dialog">
        <el-dialog
                :title="title"
                :visible.sync="isShow"
                :width="width"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                @close="fn"
        >
            <slot></slot>
            <div slot="footer" class="dialog-footer reminder-dialog-footer">
                <slot name="Remfooter"></slot>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    @Component({

    })
    export default class DialogInput extends Vue {
        isShow: boolean = false;
        @Prop() title: string;
        @Prop({ default: '560px' }) width: string;
        @Prop({
            default: () => () => {}
        }) close
        fn () {
            this.$emit('close');
        }
        openDialog () {
            this.isShow = true;
        }
        closeDialog () {
            this.isShow = false;
        }
    }
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
    .reminder-dialog {
        border-radius: 4px;
        .el-dialog__header {
            background: $__color-bg-primary;
            text-align: center;
            height: 60px;
            line-height: 60px;
            padding: 0;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            .el-dialog__title {
                font-size: $__big-font-size;
                color: $__color-label;
            }
        }
        .el-dialog__body {
            padding: 20px 20px 20px 20px;
        }
        .el-dialog__footer {
            padding-bottom: 30px;
            padding-top: 0px;
        }
        .el-dialog__headerbtn {
            font-size: 24px;
            top: 15px;
        }
        .reminder-dialog-footer {
            display: flex;
            justify-content: center;
        }
        .reminder-btn {
            width: 150px;
            height: 36px;
            color: #fff;
        }
        .rem-dialog-con {
            text-align: center;
            color: $__color-show;
        }
        .reminder-btn-close {
            @extend .reminder-btn;
            background-color: $__color-border;
            border-color: $__color-border;
            margin-right: 18px;
        }
        .reminder-btn-save {
            @extend .reminder-btn;
            background-color: $__color-primary;
            border-color: $__color-primary;
        }
    }
</style>